<template>
  <div class="main">
    <div class="zhuanpan">
      <!-- 转盘 -->
      <img
        src="@/assets/grandTurntableLottery/zhuanpan.png"
        style="width: 100%; height: 100%;"
        class="turntable"
        @transitionend="transitionend"
        :style="
          'transform: rotate(' +
            deg +
            'deg);  transition-duration: ' +
            time +
            's ;'
        "
      />
      <!-- 指针 -->
      <img class="zhizhen" src="@/assets/grandTurntableLottery/zhizhen.png" />
    </div>
    <!-- 抽奖按钮 -->
    <div class="Btnbox">
      <VButton
        class="Btn"
        round
        type="info"
        :disabled="click"
        @click="start"
      ></VButton>
    </div>
  </div>
</template>

<script>
import { Button, Toast, Dialog } from "vant";

export default {
  //页面需要用到的数据
  data() {
    return {
      time: 5, // 旋转所用时间
      deg: 0, // 旋转角度
      click: false, //控制点击
      pageInfo: {},
      //转盘数据
      arr: [
        { deg: 0, msg: "5金币", num: "5" },
        { deg: 45, msg: "50金币", num: "50" },
        { deg: 90, msg: "40金币", num: "40" },
        { deg: 135, msg: "30金币", num: "30" },
        { deg: 180, msg: "5金币", num: "5" },
        { deg: 225, msg: "20金币", num: "20" },
        { deg: 270, msg: "10金币", num: "10" },
        { deg: 315, msg: "35金币", num: "35" },
      ],
    };
  },

  computed: {},
  components: {
    VButton: Button,
  },
  created() {},
  methods: {
    //点击开始
    start() {
      if (this.click) {
        return;
      }
      this.startGame();
    },
    //根据索引转到指定位置
    play(index) {
      this.time = 5; //设置转到时长
      this.deg = 360 * 3 + this.arr[index].deg + 20; //根据奖品设置转到角度
    },
    //重置转盘
    rest() {
      this.click = false; //开锁
      this.time = 0; //恢复旋转时间0
      this.deg = 0; //恢复旋转角度0
    },
    //抽奖
    startGame() {
      this.click = true;
      //可通过接口获取指定奖品
      setTimeout(() => {
        let index = 2;
        this.play(index);
      }, 100);
    },
    //动画结束回调-已转完
    transitionend() {
      Dialog.confirm({
        title: "游戏结束",
        message: "再来一次",
      })
        .then(() => {
          this.rest();
          this.startGame();
        })
        .catch(() => {
          this.rest();
        });
    },
  },
};
</script>

<style scoped lang="less">
.main {
  width: 375px;
  height: 100vh;
  min-height: 667px;
  background-color: #24ba7f;
  box-sizing: border-box;
  padding-top: 135px;
  position: relative;
  .cjjh {
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
    color: #007c8c;
  }
  .zhuanpan {
    position: relative;
    width: 329px;
    height: 329px;
    margin: auto;
    .turntable {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      margin: auto;
      transform: rotate(0deg);
      z-index: 12;
      transition-timing-function: ease;
      transition-property: all;
    }
    .zhizhen {
      position: absolute;
      width: 20px;
      height: 100px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      margin-top: -33px;
      z-index: 99;
    }
  }
  .Btnbox {
    text-align: center;
    margin-top: 25px;
    box-sizing: border-box;
    .Btn {
      width: 237px;
      height: 49px;
      border: 0;
      background: url("../../assets/grandTurntableLottery/cjBtn.png") no-repeat
        top center;
      background-size: 237px 49px;
    }
  }
  .liping {
    position: absolute;
    left: 0;
    top: 415px;
    width: 163px;
    height: 93px;
    z-index: 100;
  }
  .peopel {
    position: absolute;
    right: 35px;
    top: 415px;
    width: 70px;
    height: 97px;
    z-index: 100;
  }
  .returnHome {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    font-size: 14px;
    color: #ffffff;
  }
  /deep/.van-popup {
    width: 300px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #2db37f;
    border-radius: 10px;
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding: 15px;
      box-sizing: border-box;
      background: url("../../assets/grandTurntableLottery/dialogBG.png")
        no-repeat bottom center;
      background-size: 300px 265px;
      border-radius: 10px;
      background-color: #2db37f;
    }
  }
  .noData {
    position: absolute;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    .van-loading {
      padding: 10px;
      border-radius: 5px;
    }
  }
}

@keyframes rotateArc {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(3600deg);
  }
}
</style>
